
<html>

<title>HTML Editor</title>

<head>

<style type="text/css">
.openingeditor{width:984px;font-size:22px;color:#ccc;padding:10px;text-align:center;background:#555;margin:20px 0 0;}
#htmleditorcontroll{width:1004px;margin0;padding:10px 0 0;border-top:5px double #333;height:40px;}
#htmleditorcontroll button{font-size:0.9em;font-weight:normal;cursor:pointer;margin:0px 20px;padding:3px 8px;font-family:Arial,Tahoma;text-align:center;background:rgba(55,55,55, .5);color:#fff;text-shadow:1px 0px 1px #000;border-radius:10px;border:1px solid #eee;box-shadow:-1px -1px 1px #444,2px 2px 2px #000;transition:1s ease-in-out;-o-transition:1s ease-in-out;-ms-transition:1s ease-in-out;-moz-transition:1s ease-in-out;-webkit-transition:1s ease-in-out;}
#htmleditorcontroll button:hover{background:rgba(0,0,0, .8);color:#0f2;}
a:focus, #htmleditorcontroll button:focus{outline:none !important;}
.clear{clear:both;margin:0;padding:0;height:0;}
#htmleditor{width:100%;margin:10px auto;}
#code_editor{width:434px;float:left;padding:3px;background:orange;border-radius:10px;overflow:auto;}
textarea.codebox{width:412px;height:470px;min-height:470px;max-height:470px;border:1px solid red;padding:10px;font:13px "Courier New",Courier,monospace;line-height:18px;border-radius:8px;white-space:nowrap;}
#htmlpreview{position:relative;margin-top:-40px;padding:0 0 70px 0;float:right;position:relative;border-radius:3px;}
.myprev{position:relative;width:545px;height:495px;float:right;margin-top:-54px;background:rgba(255,255,255, .95);border:3px solid #555;border-radius:8px;overflow:auto;}
.GRpreview, .smallGRpreview{min-height:495px;max-height:4000px;min-width:545px;max-width:1007px;display:block;}
.myprev2 iframe.smallGRpreview{width:1007px;height:475px;max-height:4000px;overflow:visible;}
#htmlpreview button{margin-right:5px;}
#htmlpreview .myprev2{width:0;height:0;overflow:hidden;position:absolute;top:40px;right:0;border:3px solid transparent;transition:0.5s 1s;-o-transition:0.5s 1s;-ms-transition:0.5s 1s;-moz-transition:0.5s 1s;-webkit-transition:0.5s 1s;}
.myprev:hover{z-index:99;}#htmlpreview{z-index:100;}
#htmlpreview:hover .myprev2{margin-right:-10px;width:1012px;height:496px;background:#eee;border:3px solid #555;transition:0.3s;-o-transition:0.3s;-ms-transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;overflow:hidden;}
</style>

</head>

<body>

<div class="openingeditor">
Please click the button to display. Continue with editing code and click to see the results!</div>
<div id="htmleditorcontroll">
<button onclick="preview.document.write(document.getElementsByTagName('textarea')[0].value); preview.document.close(); preview.focus()">Preview in a small box</button>
<button onclick="window.document.form2.code.value='';preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</div>
<div style="clear: both;">
</div>
<div id="htmlhtmleditor">
<form id="code_editor" method="post" name="form2">
<textarea class="codebox" name="code" onclick="focus(this.code)">
<!DOCTYPE html>
<html>
<title>Text Property</title>
<head>  
<style type="text/css">
body{ color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc; }
pre{width:35%;float:left;display:block;margin:10px 21px;font-family:Arial;padding:10px 20px;background:#eee;border:1px dotted #000;}
pre.kanan{float:right;margin:10px 20px 10px 0;}rd{color:red;}be{color:blue;}gn{color:green;}


div{
      width:80%;
      margin:20px auto;
      background:white;
      border:solid 5px #000;
      padding:30px;
      border-radius:10px;
      box-shadow:0 0 12px #000;
}
p{
      font-size:12px;
      color:green;
      line-height:1em;
} 
h3{
      font-size:18px;
      color:orange;
      margin:20px 0;
}
p.satu{
     text-align:right; 
}
h3.satu{ 
     text-align:center;
}
p.dua{
     text-align:right;
     text-transform:uppercase; 
}
h3.dua{ 
     text-align:center;
     text-transform:capitalize; 
}
</style>
</head>
<body>
<pre>p{
      font-size:12px;
      line-height:1em;
      <rd>color:green;</rd>
}</pre>
<pre class="kanan">h3{
      font-size:18px;
      margin:10px 0;
      <rd>color:orange;</rd>
}</pre>
<br style="clear:both;"/>
<div>
<p>Teks dengan pengaturan color property</p>
<h3>h3 dg pengaturan color property</h3>
</div>
<pre>p{
      font-size:12px;
      line-height:1em;
      <be>color:green;</be>
      <rd>text-align:right;</rd>
}</pre>
<pre class="kanan">h3{
      font-size:18px;
      margin:10px 0;
      <be>color:orange;</be>
      <rd>text-align:center;</rd>
}</pre>
<br style="clear:both;"/>

<div>
<p class="satu">Teks dengan pengaturan color property & text-align property</p>
<h3 class="satu">h3 dg pengaturan color property & <br/>text-align property</h3>
</div>

<pre>p{
      font-size:12px;
      line-height:1em;
      <gn>color:green;</gn>
      <be>text-align:right;</be>
      <rd>text-transform:uppercase; </rd>
}</pre>
<pre class="kanan">h3{
      font-size:18px;
      margin:10px 0;
      <gn>color:orange;</gn>
      <be>text-align:center;</be>
      <rd>text-transform:capitalize; </rd>
}</pre>
<br style="clear:both;"/>

<div>
<p class="dua">Teks dengan pengaturan color property, text-align property & text-transform\ property</p>
<h3 class="dua">h3 dg pengaturan color property,<br/>text-align property &<br/>text-transform property</h3>
</div>
</body> 
</html>
</textarea> 
</form>
<div id="htmlpreview">
<button onclick="preview2.document.write(document.getElementsByTagName('textarea')[0].value); preview2.document.close();preview2.focus()">Preview in a larger box</button>
<br />
<div class="myprev2">
<iframe src="about:blank" class="smallGRpreview" frameborder="0" name="preview2"></iframe>
</div>
</div>
<div class="myprev">
<iframe src="about:blank" class="GRpreview" frameborder="0" name="preview"></iframe>
</div>
</div>


</body>

</html>